<template>
  <!-- 一只羊的关系图 -->
  <div class="yangview-contain">
    <div class="min-box top0 left0" @click="selectyang('father')">
      <div class="min-cirle green-bac left0" :class="{'blue-border1':nowguanxi==='father'}"></div>
      <img class="min-img left0" src="@/assets/yang/yang4.png" />
      <div class="min-name right0">父亲</div>
    </div>
    <div class="border-line1"></div>

    <div class="min-box top120 left0" @click="selectyang('grandpa')">
      <div class="min-cirle green-bac left0" :class="{'blue-border1':nowguanxi==='grandpa'}"></div>
      <img class="min-img left0" src="@/assets/yang/yang3.png" />
      <div class="min-name right0">祖父</div>
    </div>
    <div class="border-line2"></div>

    <div class="min-box top240 left0" @click="selectyang('grandfather')">
      <div class="min-cirle green-bac left0" :class="{'blue-border1':nowguanxi==='grandfather'}"></div>
      <img class="min-img" src="@/assets/yang/yang5.png" />
      <div class="min-name right0">外祖父</div>
    </div>
    <div class="border-line3"></div>

    <div class="min-box top0 right0" @click="selectyang('mother')">
      <div class="min-cirle green-bac right0" :class="{'blue-border1':nowguanxi==='mother'}"></div>
      <img class="min-img right0" src="@/assets/yang/yang4.png" />
      <div class="min-name left0">母亲</div>
    </div>
    <div class="border-line4"></div>

    <div class="min-box top120 right0" @click="selectyang('grandma')">
      <div class="min-cirle green-bac right0" :class="{'blue-border1':nowguanxi==='grandma'}"></div>
      <img class="min-img right0" src="@/assets/yang/yang3.png" />
      <div class="min-name left0">祖母</div>
    </div>
    <div class="border-line5"></div>

    <div class="min-box top240 right0" @click="selectyang('grandmother')">
      <div class="min-cirle green-bac right0" :class="{'blue-border1':nowguanxi==='grandmother'}"></div>
      <img class="min-img right0" src="@/assets/yang/yang2.png" />
      <div class="min-name left0">外祖母</div>
    </div>
    <div class="border-line6"></div>

    <div class="big-box" :class="{'blue-border1':nowguanxi==='bion'}" @click="selectyang('bion')">
      <img class="big-img" src="~@/assets/yang/yang1.png" />
      <div v-if="yanglist.bion" class="big-name">{{ yanglist.bion.name }}</div>
      <div v-else class="big-name">湖羊</div>
    </div>

    <!-- <div class="min-cirle green-bac">母亲</div>
    <div class="min-cirle green-bac">祖父</div>
    <div class="big-cirle green-bac">湖羊001</div>
    <div class="min-cirle green-bac">外祖父</div>
    <div class="min-cirle blue-bac">祖母</div>
    <div class="min-cirle blue-bac">外祖母</div> -->
  </div>
</template>

<script>
import req from "@/api/digital-production/Individual-bio-management/information-management/index";
export default {
  name: "Yangguanxitu",
  props: {
    bionId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      // 本体bion 母mother 父father 外祖母grandma 外祖父grandpa 祖母grandmother 祖父grandfather
      nowguanxi: 'bion',
      yanglist: {}
    }
  },
  watch: {
    bionId: {
      handler(newval) {
        this.bionId = newval
        // console.log(newval)
        if (newval) {
          this.getyangmessage()
        }
      }
    //   immediate: true
    }
  },
  mounted() {
    this.getyangmessage()
  },
  methods: {
    // 选择了某只羊
    selectyang(na) {
      let nowyangmes = this.yanglist[na]
      if (nowyangmes) {
        this.$message.success("选择成功")
        nowyangmes.guanxi = na
        this.nowguanxi = na
        this.$emit("setingyang", nowyangmes)
      } else {
        this.$message.warning("个体无此关系")
      }
    },
    // 获取基础信息
    getyangmessage() {
      let params = this.bionId
      if (this.bionId) {
        req.getguanximes(params).then(
          res => {
            if (res.code === 1) {
              console.log('羊的关系', res.data)
              let list = res.data
              if (list.bion) {
                this.yanglist = list
                let nowyangmes = list.bion
                nowyangmes.guanxi = this.nowguanxi
                this.$emit("setingyang", nowyangmes)
              }
            } else {
              this.$message.error("查询羊关系失败！！！")
            }
          }
        )
      } else {
        this.$message.warning("没有羊唯一标识")
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    .yangview-contain{
        width: 500px;
        height: 400px;
        position: relative;
        .min-box{
            width: 150px;
            height: 100px;
            position: absolute;
            // background: #84cbdb;
            // 画个小圆
            .min-cirle{
                border-radius: 50%;
                width: 100px;
                height: 100px;
            }
            // 背景图片
            .min-img{
                width: 100px;
                height: 100px;
                position: absolute;
                z-index: 10;
            }
            // 文字说明
            .min-name{
                position: absolute;
                z-index: 10;
                width: 50px;
                height: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
                // background-color: #49b386;
                white-space: nowrap;
                font-size: 16px;
                text-align: center;
                cursor: pointer;
            }
            .min-name:hover{
              color: #53c596;
            }
            // 背景色
            .green-bac{
                background-color: #49b386;
                position:absolute;
                z-index: 9;
            }
            .blue-bac{
                background-color: #84cbdb;
                position:absolute;
                z-index: 9;
            }
        }
        .border-line1{
            position: absolute;
            top: 50px;
            left: 150px;
            width: 70px;
            height: 70px;
            border: 0px solid #49b386;
            border-top-width: 1px;
            border-right-width: 1px;
        }
        .border-line2{
            position: absolute;
            top: 50px;
            right: 150px;
            width: 70px;
            height: 70px;
            border: 0px solid #49b386;
            border-top-width: 1px;
            border-left-width: 1px;
        }
        .border-line3{
            position: absolute;
            top: 170px;
            left: 150px;
            width: 70px;
            height: 70px;
            border: 0px solid #49b386;
            border-top-width: 1px;
            // border-right-width: 1px;
        }
        .border-line4{
            position: absolute;
            top: 170px;
            right: 150px;
            width: 70px;
            height: 70px;
            border: 0px solid #49b386;
            border-top-width: 1px;
            // border-right-width: 1px;
        }
        .border-line5{
            position: absolute;
            top: 220px;
            left: 150px;
            width: 70px;
            height: 70px;
            border: 0px solid #49b386;
            border-bottom-width: 1px;
            border-right-width: 1px;
        }
        .border-line6{
            position: absolute;
            top: 220px;
            right: 150px;
            width: 70px;
            height: 70px;
            border: 0px solid #49b386;
            border-bottom-width: 1px;
            border-left-width: 1px;
        }
        // 中间位置圆圈
        .big-box{
            border-radius: 50%;
            width: 150px;
            height: 150px;
            background-color: #49b386;
            position: absolute;
            left: 180px;
            top: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            // border: #84cbdb 5px solid;
            cursor: pointer;
            animation: jelly 5.5s linear infinite;
            @keyframes jelly {
              0%,
              100% {
                transform: scale(1);
              }

              33% {
                transform: scale(0.9);
              }

              66% {
                transform: scale(1.1);
              }
            }
            .big-img{
                width: 100px;
                height: 100px;
            }
            .big-name{
                width: 150px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: aliceblue;
            }
        }
    }
    .left0{
        left: 0;
    }
    .right0{
        right: 0;
    }
    .top0{
        top:0;
    }
    .top120{
        top:120px;
    }
    .top240{
        top:240px;
    }
    .blue-border1{
       border: #84cbdb 5px solid;
    }
</style>
